<template>
	<view class="content">
		<!-- 头部 -->
		<u-navbar
			title='应用系统管理'
			:autoBack="true"
			leftIconColor="#000"
			:placeholder="true"
			titleStyle ="color:#000;font-weight: bold;">
			<view
				class="u-nav-slot"
				slot="left"
			>
				<span @click="queit" style="font-size: 14px;">退出</span>
			</view>
			<view
				class="u-nav-slot"
				slot="right"
			>
				<span @click="retrieveCamera" style="font-size: 14px;">摄像头</span>
			</view>
		</u-navbar>
		<!-- 摄像头 -->
		<u-sticky :offsetTop="prototype" style="height: 100%;width: 100%;">
			<video
				
				id="myVideo" 
				style="width: 100%;height:100%; fill;position:inherit;" 
				src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
				@error="videoErrorCallback" controls>
			</video>
		</u-sticky>
	</view>
</template>

<script>
	import {getUserInfo,userLogin} from "@/api/user.js"
	export default {
		data() {
			return {
				title: '异常记录',
				prototype:''
			}
		},
		onLoad() {
			this.barHeight();
			this.retrieveCamera()
		},
		methods: {
			//监听状态栏的高度 解决导航固定问题
			barHeight(){
				uni.getSystemInfo({
				    success:(e)=> {
						if(e.statusBarHeight==0){
							this.prototype = 0
						}else{
							this.prototype = e.statusBarHeight + 44 + 'px';
						}
						
					}
				})
			},
			// 退出应用
			queit(){
				uni.$u.plus.runtime.quit();
			},
			// 调取摄像头
			retrieveCamera(){
				// 创建一个WebSocket对象
				const socket = new WebSocket('ws:https://api2.hik-cloud.com/v1/ezviz/account/info');
				
				// 连接打开时触发
				socket.addEventListener('open', (event) => {
				    console.log('WebSocket连接已打开：', event);
				
				    // 发送一条消息
				    socket.send('Hello, WebSocket!');
				});
				
				// 接收到服务器消息时触发
				socket.addEventListener('message', (event) => {
				    console.log('收到服务器消息：', event.data);
				});
				
				// 连接关闭时触发
				socket.addEventListener('close', (event) => {
				    console.log('WebSocket连接已关闭：', event);
				});
				
				// 发生错误时触发
				socket.addEventListener('error', (event) => {
				    console.error('WebSocket错误：', event);
				});
			},
			videoErrorCallback(val){
				console.log(123,val)
			}
		}
	}
</script>

<style>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		height: 100vh;
		width: 100%;
	}
	/deep/.uni-video{
		height: 100%;
	}
</style>
